<template>
	<!-- <goto-form-fix-btn :btnImg="imagePath + 'submit-btn.png'" :targetId="scrollToTargetId"
		:scrollTop="scrollTop"></goto-form-fix-btn> -->
	<view v-if=" scrollData >= 400" @click.stop="toTopMethod" block class="FiexdBut">
	
		<image class="btn" mode="widthFix" :src="showBtnImg"></image>
		<!-- <view class="btn">免费办理 包邮到家</view> -->
	</view>

</template>

<script>
	import {
		computed,
		ref
	} from "vue";
	// #ifdef H5
	import VueScrollTo from "vue-scrollto"
	// #endif

	export default {
		data() {
			return {
				// #ifdef H5
				// 滚动条数据
				scrollData: 0,
				// #endif

			}
		},
		props: ['targetId', 'scrollTop', 'btnImg'],
		mounted() {
			// #ifdef H5
			// 监听滚动条位置
			window.addEventListener("scroll", this.scrollTopMethod, true);
			// #endif

		},
		computed: {
			// #ifndef H5
			scrollData: function() {
				return this.scrollTop
			},
			// #endif
			showBtnImg: function() {
				if (this.btnImg) {
					return this.btnImg
				}
				return ''
			}

		},
		methods: {
			// #ifdef H5
			scrollTopMethod() {
				this.scrollData = document.documentElement.scrollTop || document.body.scrollTop;
			},
			// #endif

			toTopMethod() {
				// #ifdef H5
				console.log('toTopMethod', this.targetId)
				let offset = document.documentElement.clientHeight / 2 - 100;
				VueScrollTo.scrollTo(document.getElementById(props.targetId), 1000, {
					offset: -offset,
				});
				// #endif
				// #ifndef H5
				uni.pageScrollTo({
					selector: "#" + this.targetId,
					duration: 1000
				});
				// #endif
			}
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.FiexdBut {
		width: 100%;
		padding: 0px;
		border-width: 0px;
		position: fixed;
		z-index: 3;
		bottom: 10rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 75%;

			// background-color: #ff4727;
			// border-radius: 40rpx;
			text-align: center;
			// height: 80rpx;
			height: auto;
			line-height: 80rpx;
			color: #fff;
			font-weight: 600;
			animation: butChange 1s infinite;
		}

	}
</style>